<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta  http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title></title>
		<style>
			/*
			 媒体特性：
			   width  视口的宽度
			   height 视口的高度
			   
			   * min-width 视口的最小宽度（视口大于指定宽度时生效）
			     max-width 视口的最大宽度(视口小于指定宽度时生效)
			     
			*/
			@media (min-width:600px) and (max-width:768px){
				body{
					background-color: #bfa;
				}
			}
			
			/*
			 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个时点时发生变化
			 一般比较常用的断点
			 */
			
			/*@media (min-width:600px){
				body{
					background-color: #bfa;
				}
			}*/
		</style>
	</head>
	<body>
		
	</body>
</html>
